<template>
  <ArticleMenu />
  <ArticleTopBg
    height="600px"
    :title="webConfigStore.changelogTitle"
    :subtitles="webConfigStore.changelogSubtitle"
    :background-images="webConfigStore.parsedChangelogCarousel"
    v-motion
    :initial="{ opacity: 0, y: 50 }"
    :enter="{ opacity: 1, y: 0, transition: { duration: 800 } }"
  ></ArticleTopBg>
  <div class="changelog">
    <!-- 统计信息 -->
    <div class="changelog-stats">
      <div class="stat-item">
        <div class="stat-value">{{ totalUpdates }}</div>
        <div class="stat-label">更新次数</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ stats.feature }}</div>
        <div class="stat-label">新功能</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ stats.fix }}</div>
        <div class="stat-label">问题修复</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ stats.optimize }}</div>
        <div class="stat-label">优化改进</div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="changelog-filters">
      <div class="search-box">
        <PhMagnifyingGlass :size="20" weight="bold" class="search-icon" />
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索更新内容..."
        >
      </div>

      <div class="filter-group">
        <select v-model="selectedVersion" class="filter-select">
          <option value="">所有版本</option>
          <option v-for="version in versions" :key="version" :value="version">
            Version {{ version }}
          </option>
        </select>

        <div class="type-filters">
          <button
            v-for="type in changeTypes"
            :key="type"
            :class="['type-btn', { active: selectedTypes.includes(type) }]"
            @click="toggleType(type)"
          >
            <component
              :is="getTypeIcon(type)"
              :size="16"
              weight="fill"
            />
            {{ getTypeLabel(type) }}
          </button>
        </div>
      </div>
    </div>

    <!-- 更新列表 -->
    <div class="changelog-list" v-if="filteredChangelog.length">
      <div v-for="log in filteredChangelog" :key="log.date" class="changelog-item">
        <div class="log-header">
          <div class="version" v-if="log.version">Version {{ log.version }}</div>
          <div class="date">{{ formatDate(log.date) }}</div>
        </div>

        <div class="log-content">
          <div v-for="(group, index) in log.changes" :key="index" class="change-group">
            <div class="change-items">
              <div v-for="(item, i) in group.items" :key="i"
                   class="change-item" :class="group.type">
                <component
                  :is="getTypeIcon(group.type)"
                  :size="18"
                  weight="fill"
                  class="change-icon"
                />
                <span class="change-text">{{ item }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 无搜索结果提示 -->
    <div v-else class="no-results">
      <PhMagnifyingGlass :size="32" weight="light" />
      <p>没有找到相关更新记录</p>
    </div>
  </div>
  <LayoutFloatingButtons />
  <LayoutFooter />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import LayoutFooter from '@/components/layout-footer.vue';
import LayoutFloatingButtons from '@/components/layout-floating-buttons.vue';
import ArticleMenu from '@/components/article-menu.vue';
import ArticleTopBg from '@/components/article-top-bg.vue';
import {
  PhMagnifyingGlass,
  PhStar,
  PhWrench,
  PhRocket,
  PhPaintBrush
} from '@phosphor-icons/vue';
import { useWebConfigStore } from '@/stores';

type ChangeType = 'feature' | 'fix' | 'optimize' | 'style'

interface ChangeGroup {
  type: ChangeType
  items: string[]
}

interface ChangeLog {
  date: string
  version?: string
  changes: ChangeGroup[]
}
const webConfigStore = useWebConfigStore();
// 示例数据
const changelog = ref<ChangeLog[]>([
  {
    date: '2024-03-20',
    version: '1.0.1',
    changes: [
      {
        type: 'feature',
        items: [
          '新增用户登录功能',
          '新增评论功能'
        ]
      },
      {
        type: 'fix',
        items: [
          '修复移动端显示问题',
          '修复深色模式下的样式问题'
        ]
      },
      {
        type: 'optimize',
        items: [
          '优化页面加载速度',
          '优化移动端体验'
        ]
      }
    ]
  },
  {
    date: '2024-03-15',
    version: '1.0.0',
    changes: [
      {
        type: 'feature',
        items: [
          '博客系统上线',
          '支持文章发布和编辑'
        ]
      },
      {
        type: 'optimize',
        items: [
          '首页性能优化'
        ]
      }
    ]
  }
]);

// 筛选和搜索状态
const searchQuery = ref('');
const selectedVersion = ref('');
const selectedTypes = ref<ChangeType[]>([]);
const changeTypes: ChangeType[] = ['feature', 'fix', 'optimize', 'style'];

// 统计数据计算
const stats = computed(() => {
  const result = {
    feature: 0,
    fix: 0,
    optimize: 0,
    style: 0
  };

  changelog.value.forEach(log => {
    log.changes.forEach(group => {
      result[group.type] += group.items.length;
    });
  });

  return result;
});

// 计算总更新次数
const totalUpdates = computed(() => {
  return changelog.value.length;
});

// 获取所有版本号
const versions = computed(() => {
  return changelog.value
    .map(log => log.version)
    .filter(Boolean) as string[];
});

// 切换类型筛选
const toggleType = (type: ChangeType) => {
  const index = selectedTypes.value.indexOf(type);
  if (index === -1) {
    selectedTypes.value.push(type);
  } else {
    selectedTypes.value.splice(index, 1);
  }
};

// 筛选后的更新日志
const filteredChangelog = computed(() => {
  return changelog.value.filter(log => {
    // 版本筛选
    if (selectedVersion.value && log.version !== selectedVersion.value) {
      return false;
    }

    // 类型筛选
    if (selectedTypes.value.length > 0) {
      const hasSelectedType = log.changes.some(group =>
        selectedTypes.value.includes(group.type)
      );
      if (!hasSelectedType) return false;
    }

    // 搜索筛选
    if (searchQuery.value) {
      const query = searchQuery.value.toLowerCase();
      // 搜索版本号
      const versionMatch = log.version?.toLowerCase().includes(query);
      // 搜索更新内容
      const contentMatch = log.changes.some(group =>
        group.items.some(item =>
          item.toLowerCase().includes(query)
        )
      );
      if (!versionMatch && !contentMatch) return false;
    }

    return true;
  });
});

// 格式化日期
const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

// 获取更新类型标签
const getTypeLabel = (type: ChangeType) => {
  const labels = {
    feature: '新功能',
    fix: '修复',
    optimize: '优化',
    style: '样式'
  };
  return labels[type];
};

// 获取图标组件
const getTypeIcon = (type: ChangeType) => {
  const icons = {
    feature: PhStar,
    fix: PhWrench,
    optimize: PhRocket,
    style: PhPaintBrush
  };
  return icons[type];
};
</script>
<style lang="less" scoped>
.changelog {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  width: 100%;

  // 统计卡片样式
  .changelog-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;

    .stat-item {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      transition: all 0.3s ease;
      box-sizing: border-box;

      &:hover {
        transform: translateY(-2px);
        border-color: #3b82f6;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
      }

      .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 4px;
      }

      .stat-label {
        font-size: 14px;
        color: #6b7280;
      }
    }
  }

  // 筛选器样式
  .changelog-filters {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;

    .search-box {
      position: relative;
      width: 100%;

      input {
        width: 100%;
        height: 44px;
        padding: 0 16px 0 40px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 15px;
        transition: all 0.3s ease;
        box-sizing: border-box;

        &:focus {
          outline: none;
          border-color: #3b82f6;
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        &::placeholder {
          color: #9ca3af;
        }
      }

      .search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
      }
    }

    .filter-group {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      width: 100%;

      .filter-select {
        height: 36px;
        padding: 0 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        color: #1f2937;
        font-size: 14px;
        background: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 120px;
        max-width: 200px;

        &:focus {
          outline: none;
          border-color: #3b82f6;
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
      }

      .type-filters {
        flex: 1;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        min-width: 0;

        .type-btn {
          height: 36px;
          padding: 0 16px;
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          background: #fff;
          color: #6b7280;
          font-size: 14px;
          display: flex;
          align-items: center;
          gap: 6px;
          cursor: pointer;
          transition: all 0.2s ease;
          white-space: nowrap;

          &:hover {
            border-color: #3b82f6;
            color: #3b82f6;
          }

          &.active {
            background: #3b82f6;
            border-color: #3b82f6;
            color: #fff;
          }
        }
      }
    }
  }

  // 更新日志列表
  .changelog-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
  }

  .changelog-item {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  .log-header {
    padding: 16px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .version {
      font-size: 18px;
      font-weight: 600;
      color: #1f2937;
    }

    .date {
      color: #6b7280;
      font-size: 14px;
    }
  }

  .log-content {
    padding: 20px 24px;
  }

  .change-group {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .change-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .change-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;

    .change-icon {
      margin-top: 2px;
      flex-shrink: 0;
    }

    .change-text {
      font-size: 15px;
      line-height: 1.5;
      flex: 1;
      min-width: 0;
    }

    // 不同类型的样式
    &.feature {
      background: #f0fdf4;
      color: #15803d;
      .change-icon { color: #16a34a; }
    }

    &.fix {
      background: #fef2f2;
      color: #991b1b;
      .change-icon { color: #dc2626; }
    }

    &.optimize {
      background: #eff6ff;
      color: #1e40af;
      .change-icon { color: #3b82f6; }
    }

    &.style {
      background: #faf5ff;
      color: #6b21a8;
      .change-icon { color: #9333ea; }
    }

    &:hover {
      transform: translateX(4px);
    }
  }

  // 无结果提示
  .no-results {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    width: 100%;
    box-sizing: border-box;

    :deep(svg) {
      margin-bottom: 16px;
      opacity: 0.5;
    }

    p {
      font-size: 15px;
      margin: 0;
    }
  }
}

// 深色模式适配
:deep(.dark) {
  .changelog {
    .changelog-stats {
      .stat-item {
        background: #1f2937;
        border-color: #374151;

        &:hover {
          border-color: #60a5fa;
          box-shadow: 0 4px 12px rgba(96, 165, 250, 0.1);
        }

        .stat-value {
          color: #e5e7eb;
        }

        .stat-label {
          color: #9ca3af;
        }
      }
    }

    .changelog-filters {
      .search-box {
        input {
          background: #1f2937;
          border-color: #374151;
          color: #e5e7eb;

          &:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
          }

          &::placeholder {
            color: #6b7280;
          }
        }
      }

      .filter-group {
        .filter-select {
          background: #1f2937;
          border-color: #374151;
          color: #e5e7eb;

          &:focus {
            border-color: #60a5fa;
          }
        }

        .type-btn {
          background: #1f2937;
          border-color: #374151;
          color: #9ca3af;

          &:hover {
            border-color: #60a5fa;
            color: #60a5fa;
          }

          &.active {
            background: #60a5fa;
            border-color: #60a5fa;
            color: #fff;
          }
        }
      }
    }

    .changelog-item {
      background: #1f2937;
      border-color: #374151;
    }

    .log-header {
      background: #111827;
      border-bottom-color: #374151;

      .version {
        color: #e5e7eb;
      }

      .date {
        color: #9ca3af;
      }
    }

    .change-item {
      &.feature {
        background: rgba(21, 128, 61, 0.1);
        color: #4ade80;
      }

      &.fix {
        background: rgba(185, 28, 28, 0.1);
        color: #f87171;
      }

      &.optimize {
        background: rgba(29, 78, 216, 0.1);
        color: #60a5fa;
      }

      &.style {
        background: rgba(107, 33, 168, 0.1);
        color: #a78bfa;
      }
    }

    .no-results {
      color: #9ca3af;
    }
  }
}

// 响应式适配
@media (max-width: 640px) {
  .changelog {
    padding: 20px 16px;

    .changelog-stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;

      .stat-item {
        padding: 16px;

        .stat-value {
          font-size: 24px;
        }

        .stat-label {
          font-size: 13px;
        }
      }
    }

    .changelog-filters {
      .filter-group {
        flex-direction: column;

        .filter-select {
          width: 100%;
          max-width: none;
        }

        .type-filters {
          justify-content: flex-start;

          .type-btn {
            flex: 1;
            justify-content: center;
          }
        }
      }
    }

    .log-header {
      padding: 12px 16px;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;

      .version {
        font-size: 16px;
      }
    }

    .log-content {
      padding: 16px;
    }

    .change-item {
      padding: 8px 12px;

      .change-text {
        font-size: 14px;
      }
    }
  }
}

// 打印样式优化
@media print {
  .changelog {
    padding: 0;

    .changelog-filters {
      display: none;
    }

    .changelog-stats {
      break-inside: avoid;
    }

    .changelog-item {
      break-inside: avoid;
      border: 1px solid #e5e7eb;
      margin-bottom: 20px;
      box-shadow: none;

      &:hover {
        transform: none;
        box-shadow: none;
      }
    }

    .change-item:hover {
      transform: none;
    }
  }
}
</style>
